<template>
        <!-- 可多选的picker，confirm返回选中的项，和选中项在原数组中的索引 -->
        <div class="check_me">
            <van-popup v-model="show" class="picker picker_me" position="bottom" @close="closePop">
            <div class="tit"><div @click.stop="cancel">删除</div><div @click.stop="confirm">确认</div></div>
            <van-checkbox-group v-model="result" class="picker_content" @change="change">
            <van-cell-group>
                <van-cell
                v-for="(item,index) in columns"
                clickable
                :key="item"
                :name="item"
                :title="`${item}`"
                @click.stop="toggle(index)"
                >
                <van-checkbox :name="item" ref="checkboxes" />
                </van-cell>
            </van-cell-group>
            </van-checkbox-group>
        </van-popup>
        </div>
</template>
<script>
import{Popup,Checkbox, CheckboxGroup } from 'vant'
export default {
    props:{
        columns:{
           default: function () {
                return ['a','b','c']
            }
        }
    },
    data() {
        return {
        result: [],//选中项
        resultIndex:[],//选中项的索引
        show:false
        };
    },
    methods: {
        change(arr){//选中项改变时触发，返回选中项数组
        this.resultIndex=[]
            arr.forEach((item,index)=>{
                this.columns.forEach((item1,index1)=>{
                    if(item==item1){
                        this.resultIndex.push(index1)
                    }
                })
            })
            this.resultIndex.sort()//升序
        },
        confirm(){
            this.$emit('confirm',this.result,this.resultIndex)
            this.show=false
            // console.log(this.result)
        },
        cancel(){
            this.$emit('cancel',this.result,this.resultIndex)
            this.show=false
            
        },
        toggle(index) {//vant中的实例方法
            this.$refs.checkboxes[index].toggle();
        },
        closePop(){//关闭弹出层
            this.result=[];
            this.resultIndex=[]
        }
    }
}
</script>
<style scoped>
    .check_me{
        width: 100%;
    }
    .picker_me{
        height: 500px;
        overflow: scroll
    }

    .tit{
        position: relative;
        top:0;
        z-index:99;
        height: 100px;
        width: 100%;
        display: flex;
        line-height: 100px;
        font-size: 30px;
        justify-content: space-between
    }
    .tit>div:nth-child(1){
        margin-left: 80px;
    }
    .tit>div:nth-last-child(1){
        margin-right: 60px;
    }
    .picker_content{
        position: relative;
        height: 400px;
        overflow: scroll;
    }
</style>
<style>
    .van-cell__title{
        margin-left:-60px;
    }
    .van-cell__value{
        margin-right:60px;
    }
</style>
